<template>
    <div>
        <!-- <a href="javascript:void (0)" class="backTo" onclick="javascript:history.back(-1);">返回</a> -->
        <div class="shop-set-con">
            <div class="top-info">
                <div class="head-img">
                    <label class="choose" for="inpheadimgurl"></label>
                    <img :src="Store.headimgurl">
                    <input class="upload-img" id="inpheadimgurl" style="display: none;" type="file" @change="onFileChange($event,'headimgurl',0)" accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple>
                    <i class="icon"></i>
                </div>
                <div class="r-content">
                    <p class="name"> {{Store.companyName}}</p>
                    <p class="id">ID:00{{Store.companyId}}</p>
                </div>
            </div>
            <div class="hengye">
                <p><span class="hangyeSp1">店铺所属行业:</span><span class="hangyeSp2">{{Store.companyCommision}}%</span><span class="hangyeSp3">{{Store.industryName}}</span></p>
            </div>
             <div class="shopMap" id ="shopMap" style="height:292px;width:100%;">

             </div>
            <div class="map-content" v-show="false">
                <div class="top-add">
                    <i class="icon"></i>
                    朝阳路八里庄东里
                </div>
                <div class="map"></div>
            </div>
            <div class="set-list">
                <ul class="list-ul">
                    <li class="list-li list-li1">
                        <label>详细地址：</label>
                        <input type="text" v-model="Store.address" class="input-text" placeholder="请填写详细地址" style="height:35px;">
                    </li>
                    <li class="list-li list-li1">
                        <label>联系方式：</label>
                        <span class="lxfs">{{Store.mobile}}</span>
                    </li>
                    <li class="list-li list-li2">
                        <label>营业时间：</label>
                        <div class="right-info">
                            <div class="same-box mmll" style="width:55px;margin-left:10px;margin-top:5px;">
                                <input type="time" v-model="businessStartTime" class="time" id="myTime"  style="boredr:1px;height:30px;">
                            </div>
                            <div class="same-box mml2" style="margin-top:5px; " >
                                <input type="time" v-model="businessEndTime" class="time" id="myTime1"  style="height:30px;">
                            </div>
                        </div>
                    </li>
                    <li class="list-li list-li1">
                        <label>店铺介绍：</label>
                        <input type="text" v-model="Store.slogan" class="input-text" style="height:30px;">
                    </li>
                </ul>
                <div class="bottom-upload">
                    <div class="same-box"  v-for="(iu, index) in imgUrls" :key="iu.index" v-show="imgUrls.length>0">
                        <img :src="iu" class="iu_iu">
                        <span class="list-img-close" @click='delImage(index)'></span>
                    </div>
                    <div class="same-box" v-show="imgUrls.length<4">
                        <input class="upload-img" id="inpupimg"  type="file" @change="onFileChange"  accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple><!--capture="camera"-->
                        <label class="jia-icon" for="inpupimg"></label>
                    </div>
                </div>
                <input type="submit" @click="updateshop" class="sub-btn" value="提交">
            </div>
        </div>
    </div>
</template>
<style scoped>
    @import "../../../assets/business/css/shop_set.css";
    .jinqian {
        margin-left: 6rem;
    }
    .id {
        text-align: left;
    }
    .bottom-upload{
        margin-top: 20px;
    }
    .bottom-upload:after{
        display:block;
        clear:both;content:"";
        visibility:hidden;
        clear: both;
    } 
.upload-img{
    display: none;
}
.list-img-close{
    height: 15px;
    width: 15px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: url("../../../assets/personal/images/addcha.png") no-repeat;
    background-size: 100% 100%;
}
.jia-icon{
    background: url("../../../assets/personal/images/addimg.png") no-repeat center center;
    background-size: 100% 100%;
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    left: 50%;
    margin-left: -1rem;
    top: 50%;
    margin-top: -1rem;
}
.same-box{
    height: 3.5rem;
    width: 3.5rem;
    margin-left: 0.5rem;
    position: relative;
    padding: 0.1rem;
    float: left;
}
.iu_iu{
    margin-top: 15px;
    height: 80px;
}
.Commentset{
text-align: left;
background: white;
padding: 15px;
margin-top: -16px;
}
.Commentset span{
    float:right;
    color: #999999;
}
.xz-icon{
    margin-right: 10px;
    width: 20px;
    height: 20px;
    float: left;
    border-radius: 50%;
    background: url("../../../assets/personal/images/bsgg.png")no-repeat center center;/*choose-icon-active.png"*/
    background-size: 100% 100%;
}
.chak_avti{
    margin-right: 10px;
    width: 20px;
    height: 20px;
    float: left;
    border-radius: 50%;
    background: url("../../../assets/personal/images/choose-icon-active.png")no-repeat center center;/*choose-icon-active.png"*/
    background-size: 100% 100%;
}
</style>
<script>
    export default {
        data() {
            return {
                imgUrls: [],
                shopsID: 0,
                Store: {},
                headimgurl: "",
                accountid: 0,
                time_show: true,
                time_show1: true,
                timeInput: false,
                timeInput1: false,
                businessStartTime:'',
                businessEndTime:'',
                ImgUrl:''
            }
        }, mounted() {
            this.TheStore();
           
            // this.loadimg();
        },
        methods: {
            createImage: function (file, e,targetparam,type) {
                let vm = this;
                lrz(file[0], {width: 480 })
                    .then(function (rst) {
                        vm.$http({
                        url: vm.APIURL_PREFIX+'/uploadForCertificate',
                        method : "post",
                        data : rst.formData
                        }).then((response) => {
                            if(0==response.data.code){
                                if(targetparam){
                                vm[targetparam]= response.data.msg;
                                }
                                else{
                                    if(vm.imgUrls.length){
                                        vm.imgUrls.push(response.data.msg);    

                                    }
                                    else{
                                        vm.imgUrls= [response.data.msg];
                                    }
                                }
                                vm.imgUrl=vm.imgUrls.toString()
                                // vm.updateheadimgLI();
                                if(0==type){
                                    vm.updateheadimg()
                                }else{
                                    vm.updateheadimgLI();
                                }
                                
                            }
                        }).catch(function(err){
                            layer.msg("上传失败");
                            console.log(err)
                        });
                        return rst;
                    }).always(function () {
                        e.target.value = null;
                    });
                },
                delImage: function (index) {
                    let vm = this;
                    if(confirm("确定删除该图片？")){
                    vm.imgUrls.splice(index, 1);
                    vm.imgUrl=vm.imgUrls.toString()
                    vm.updateheadimgLI();
                    }
                },
            TheStore() {
                this.$http.get(this.APIURL_PREFIX + '/api/companyInfo').then((response) => {
                    this.Store = response.data.data
                    this.headimgurl = response.data.data.headimgurl
                    this.accountid = response.data.data.companyId;
                    this.businessStartTime=this.Store.businessStartTime
                    this.businessEndTime=this.Store.businessEndTime
                    this.shopsID=this.Store.companyId
                    if(this.Store.imgHeadPhoto!=""){
                         this.imgUrls=this.Store.imgHeadPhoto.split(",")
                         console.log(this.imgUrls)
                   }
                    this.TheStoreMap();
                }).catch(function (err) {
                    console.log(err)
                })
            },
             TheStoreMap() {
                this.$http.get(this.APIURL_PREFIX+'/api/wap/company/SelectOnly/'+this.shopsID).then((response) => {
                    var center = new qq.maps.LatLng(response.data.data.latitude,response.data.data.longitude);
                    var map = new qq.maps.Map(document.getElementById("shopMap"));
                    map.panTo(center);
                    map.zoomTo(13);                 
                    var marker = new qq.maps.Marker({
                        position: center,
                        map: map
                    });
                 })
              },
            loadimg(){
              this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/info').then((response) => {
                this.headimgurl = response.data.data.headimgurl
                this.accountid = response.data.data.id;
              }).catch(function(err){
                console.log(err)
              });
            },
           updateheadimgLI() {//门店照片
                this.$http.put(this.APIURL_PREFIX + '/api/company', $.param({ imgHeadPhoto: this.imgUrl, companyId: this.accountid})).then((response) => {
                    console.log(response.data);
                    if (0 == response.data.code) {
                        this.TheStore();
                        console.log("修改成功门店")
                    }
                    else {
                        layer.msg(response.data.msg)
                    }
                }).catch(function (err) {
                    console.log(err)
                });
            },
            updateheadimg() {//头像
                this.$http.put(this.APIURL_PREFIX + '/api/company', $.param({ headimgurl: this.headimgurl, companyId: this.accountid})).then((response) => {
                    console.log(response.data);
                    if (0 == response.data.code) {
                        this.TheStore();
                        console.log("修改成功头像")
                    }
                    else {
                        layer.msg(response.data.msg)
                    }
                }).catch(function (err) {
                    console.log(err)
                });
            },
            updateshop() {
                var store={}
                store=this.Store
                store.businessStartTime=this.businessStartTime
                store.businessEndTime=this.businessEndTime
                // alert(this.business_start_time)
                this.$http.put(this.APIURL_PREFIX + '/api/company', $.param(store)).then((response) => {
                    console.log(response.data);
                    if (0 == response.data.code) {
                        layer.msg("修改成功");
                        this.$router.push({ name: 'Business' })
                    }
                }).catch(function (err) {
                    console.log(err)
                });
            },
            onFileChange: function (e, targetparam,type) {
                var files = e.target.files || e.dataTransfer.files;
                if (!files.length) return;
                this.createImage(files, e, targetparam,type);
            },
          
        }
    }
</script>
